<template>
  <div class="line">
    <el-container style="width: 100%">
      <el-header style="width: 100%;margin-left: -1%">
    <el-menu
      style="width: 1902px;height: 80px"
      @select="handleSelect"
      default-active="0"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <div class="line1">风起书城</div>
      <el-menu-item index="20" style="margin-left: 30%;margin-top: -1.5%;">首页</el-menu-item>
      <el-submenu index="21" style="margin-top: -1.5%;">
        <template slot="title">分类</template>
        <el-menu-item index="1">历史</el-menu-item>
        <el-menu-item index="2">小说</el-menu-item>
        <el-menu-item index="3">地理</el-menu-item>
        <el-menu-item index="4">传记</el-menu-item>
        <el-menu-item index="5">哲学</el-menu-item>
        <el-menu-item index="6">社会学</el-menu-item>
        <el-menu-item index="7">艺术</el-menu-item>
        <el-menu-item index="8">政治</el-menu-item>
        <el-menu-item index="9">建筑</el-menu-item>
        <el-menu-item index="10">戏剧</el-menu-item>
        <el-menu-item index="11">音乐</el-menu-item>
        <el-menu-item index="12">军事</el-menu-item>
        <el-menu-item index="13">数学</el-menu-item>
        <el-menu-item index="14">美术</el-menu-item>
        <el-menu-item index="15">设计</el-menu-item>
        <el-menu-item index="16">佛教</el-menu-item>
      </el-submenu>
      <div class="line2">
        <el-input
          @keyup.enter.native="searchClick"
          placeholder="通过书名或作者搜索..."
          prefix-icon="el-icon-search"
          size="small"
          style="width: 400px;margin-top: -7%"
          v-model="keywords">
        </el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
      </div>
      <el-submenu index="30" style="margin-top: -3.0%;margin-left: 90%">
        <template slot="title"><el-avatar> user </el-avatar></template>
        <el-menu-item index="31">个人中心</el-menu-item>
        <el-menu-item index="32">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
      </el-header>
      <el-main style="margin-top: 0%">
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    provide() {
      return {
        reload: this.reload,
      }
    },
    data () {
      return {
        keywords: '',
        cid:'',
        index:'',
        isRouterAlive : true
      }
    },
    methods: {
      searchClick(){
        if(this.cid==20)
          this.cid=0;
        this.$router.push({path: '/book', query: {index: this.keywords}});
        this.reload();
      },
      handleSelect(key) {
        if (key == 20) {
          this.cid = 0;
          this.$router.push('/carousel');
        }
        else if(key==31){
          let id=this.$store.state.customerId;
          if(this.$store.state.power1==="common") {
            this.$router.push("/personalCenter");
          }
          if(this.$store.state.power1==="admin"||this.$store.state.power1==="super") {
            this.$router.push('/manage');
          }
        }
        else if(key==32){
          this.$confirm('是否确认退出?','提示',{
          }).then(()=>{
            this.$store.commit("doLogout");
            this.$router.push('/header');
          }).catch(() => { this.$message({
            message: '取消退出',
            type: 'failed'
          })});
        }
        else {
          this.cid = key;
          this.$router.push({path: '/book', query: {index: this.cid}});
         this.reload();
        }
      },
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      }

    }
  }
</script>

<style scoped>
  .line{
    width: 1902px;
    margin-top: -55px;
    margin-left: -6.5px;
    margin-right: -6px;
    outline: none;
  }
  .line1{
    width:120px;
    height: 20px;
    font-size: 30px;
    font-weight: bold;
    margin-top: 1%;
    margin-left: 20%;
    color: #e5e5e5;
    outline: none;
  }
  .line2{
    width:auto;
    height: 5px;
    font-size: larger;
    margin-top: -0.7%;
    color: #e5e5e5;
    outline: none;
  }
  .line4{
    width: 20px;
    height: auto;
    margin-top: -0.5%;
    margin-left: 85%;
    outline: none;
  }
  .line5{
    width: 260px;
    height: 20px;
    margin-top: 0%;
    margin-left: 85%;
    color: #e5e5e5;
    outline: none;
  }
</style>
